import React from 'react';
import Header from '../components/Header';
import './Dashboard.scss';
import HubCard from '../components/HubCard';
import NewHubCard from '../modules/NewHubCard';
import Grid from '@mui/material/Grid';



function Dashboard() {
    const gridStyle = {
        display: "flex", 
        flexDirection: "column", 
        alignItems: "center",
        justifyContent: "center", 
    }

    return (
        <div>
            <Header />
            <div style={{marginRight: "35px"}}>
            <Grid container spacing={4} style={{margin: "-10px"}}>
                <Grid item xs={12} sm={4} md={3} lg={2} style={gridStyle}>
                    <NewHubCard />
                </Grid>
                <Grid item xs={12} sm={4} md={3} lg={2} style={gridStyle}>
                    <HubCard />
                </Grid>
                <Grid item xs={12} sm={4} md={3} lg={2} style={gridStyle}>
                    <HubCard />
                </Grid>
                <Grid item xs={12} sm={4} md={3} lg={2} style={gridStyle}>
                    <HubCard />
                </Grid>
                <Grid item xs={12} sm={4} md={3} lg={2} style={gridStyle}>
                    <HubCard />
                </Grid>
                <Grid item xs={12} sm={4} md={3} lg={2} style={gridStyle}>
                    <HubCard />
                </Grid>
                <Grid item xs={12} sm={4} md={3} lg={2} style={gridStyle}>
                    <HubCard />
                </Grid>
            </Grid>
            </div>
        </div>
    );
};


export default Dashboard;
